<template>
  <div class="beauty">
    <beauty-header></beauty-header>
    <beauty-mid :list="iconList"></beauty-mid>
    <beauty-midb></beauty-midb>
    <beauty-mida :list="recommendList"></beauty-mida>
    <beauty-btn></beauty-btn>
  </div>
</template>

<script>
import BeautyHeader from './components/BeautyHeader.vue'
import BeautyMid from './components/BeautyMid.vue'
import BeautyMidb from './components/BeautyMidb.vue'
import BeautyMida from './components/BeautyMida.vue'
import BeautyBtn from './components/BeautyBtn.vue'
import axios from 'axios'


export default {
  name:'beauty',
  components:{
    BeautyMid,
    BeautyBtn,
    BeautyMidb,
    BeautyMida,
    BeautyHeader
    
  },
 data: function(){
    return{
      iconList: [],
      recommendList: []
    }
  },
  mounted(){
    this.getHomeApiInfo()
  },
  methods: {
    getHomeApiInfo(){
      axios.get("/mock/beauty.json").then(this.getHomeResponseInfo)
    },
    getHomeResponseInfo(response){
      //  console.log(response.data);
      let res = response.data  //就是home.json里面的内容
      if(res.success && res.dataList){
        const data = res.dataList //取json中的datalist属性
        // console.log(data.iconLists.length)
        this.iconList = data.iconLists
        this.recommendList = data.recommendLists
      }
    }
  }

   
}

</script>
